<template>
	<view class="cut_order_box">
		<view v-if="cutOrderList.length>0">
			<view class="cut_pro_list" v-for="(item,index) in cutOrderList" :key="index" @click="toCutPage(item)">
				<image :src="getFirstImg(item.images)" class="imgs" mode="aspectFit"></image>
				<view class="cut_right">
					<text style="font-size: 28rpx;font-weight: 600;">{{item.name}}</text>
					<text style="color: #9d9d9d;">价值：￥{{item.price || 0}}</text>
					<text style="color: #9d9d9d;">{{item.labelStr}}</text>
					<view class="cut_right_bottom">
						<view class="cut_price">可踢至：￥<text style="font-size: 28rpx;">{{item.payPrice}}</text></view>
						<view class="cut_title">
							<image class="img_foot" src="../../static/share/cut.png" mode="aspectFit"
								style="width: 40rpx;height: 40rpx;margin-right:5rpx">
							</image>
							<text style="letter-spacing: 0.05em;">立即踢一脚</text>
						</view>
					</view>
				</view>
			</view>
		</view>
		<view v-else>
			<!-- <view style="margin: 300rpx auto 0 auto;text-align: center;">暂无可踢脚商品</view> -->
		</view>

		<!-- <view @click="moniOtherHelp">模拟他人帮助我们踢一脚</view> -->

		<wyb-popup ref="cutPriceText" type="center" height="240" width="400" radius="6" :showCloseIcon="false">
			<view class="cutPriceText" style="padding-top: 25rpx">
				<view class="title">太棒啦</view>
				<view class="cut_price">踢掉了 <text style="color: #eb3724;font-weight: 600;">{{kanPrice}}</text>元</view>
				<view class="cut_price1">去邀请好友!</view>
			</view>
		</wyb-popup>

		<view class="fire" v-if="fireworkSta">
			<image @click="toCutDetailPage" class="new_img" mode="aspectFit"
				src="https://mochongzujie.oss-cn-hangzhou.aliyuncs.com/37ad386bc4cf46249f18623b60d9255a.png"></image>
			<image @click="quxiaoShare" class="quxiao" src="../../static/share/quxiao.png" mode="aspectFit"
				style="width: 70rpx;height: 70rpx;margin-right:5rpx"></image>
			<view class="cut_price" :text="popText">{{popText}}</view>
		</view>
	</view>
</template>

<script>
	import {
		getUserId
	} from '@/utils';
	export default {
		name: '',
		props: {},
		data() {
			return {
				cutOrderList: [
					// {
					// 	images: 'https://img10.360buyimg.com/jdcms/s230x230_jfs/t1/219599/23/37539/108235/66053a0aF1e0a2e76/c160ac5d7a9710de.jpg',
					// 	name: '洗面奶',
					// 	cutPrice: 0,
					// 	proNum: 9,
					// 	state: 0
					// },
					// {
					// 	images: 'https://img12.360buyimg.com/jdcms/s230x230_jfs/t1/223763/3/41057/121433/66117ceeF4e68530f/5defa8fcb059d1e9.jpg',
					// 	name: '呢绒外套',
					// 	cutPrice: 5,
					// 	proNum: 9,
					// 	state: 1
					// },
					// {
					// 	images: 'https://img13.360buyimg.com/jdcms/s230x230_jfs/t1/226323/40/12870/116430/65d7ef4cF46ce642c/64fb6ef4a0070e66.jpg',
					// 	name: '金属键盘',
					// 	cutPrice: 20,
					// 	proNum: 15,
					// 	state: 1
					// },
				],
				timer: null,
				kanPrice: 0,
				prizeId: '', //砍价某个商品跳转到详情页
				fireworkSta: false,
				popText: '踢掉了199.99元',
				userIp:'',
			};
		},
		components: {},

		onLoad() {
			console.log('--uid-uid--', getUserId());
			this.userIp=uni.getStorageSync('userIp') || ''
			this.getCutProList()
		},
		onUnload() {},
		methods: {
			getFirstImg(imagesStr) {
				if (imagesStr) {
					return imagesStr.split(',')[0]
				}
			},

			getCutProList() {
				this.$request(`apiActivityPrize/findList`, {}, 'GET', false).then((res) => {
					if (res.businessSuccess || res.success) {
						this.cutOrderList = res.data || []
					}
				})
			},
			toCutPage(item) {
				// #ifdef H5 || APP-PLUS
				if (!getUserId()) {
					this.$goLogin();
					return;
				}
				// #endif

				this.prizeId = item.prizeId
				this.$request(
					'apiActivityPrize/joinActivity', {
						prizeId: item.prizeId,
						uid: getUserId(),
						reqIp:this.userIp
					},
					'post',
					false,
					true
				).then((res) => {
					if (res.businessSuccess || res.success) {
						this.kanPrice = res.data.kanPrice || 0
						if (res.data.isJoin == '2') {
							this.fireworkSta = true
							this.popText = `踢掉了${this.kanPrice}元`
							// this.toDetail()
						} else {
							this.$onTo(
								`pagesInfo/cutOrderDetail/cutOrderDetail?whoEnter=me&prizeId=${this.prizeId}`)
						}
					} else {
						uni.showToast({
							title: res.msg || res.message,
							icon: 'none',
							duration: 2000
						});
					}
				});
			},
			//砍成功的时候出现烟花
			showFireworks() {
				console.log('出现眼花吧');
				this.fireworkSta = true
				// this.$refs.cutPriceText.show();
			},
			quxiaoShare() {
				this.fireworkSta = false
			},
			toCutDetailPage() {
				this.fireworkSta = false
				this.$onTo(`pagesInfo/cutOrderDetail/cutOrderDetail?whoEnter=me&prizeId=${this.prizeId}`)

			},
			toDetail() {
				this.$refs.cutPriceText.show();
				this.timer = setTimeout(() => {
					this.toCutDetail()
				}, 2500)
			},
			toCutDetail() {
				clearTimeout(this.timer)
				this.timer = null
				this.$refs.cutPriceText.close();
				this.$onTo(`pagesInfo/cutOrderDetail/cutOrderDetail?whoEnter=me&prizeId=${this.prizeId}`)
			},
			moniOtherHelp() {
				this.$onTo(`pagesInfo/cutOrderDetail/cutOrderDetail?whoEnter=others&prizeId=HD1713339467897`)
			}
		}
	};
</script>

<style lang="scss" scoped>
	.cut_order_box {
		box-sizing: border-box;
		padding: 20rpx;
		position: relative;

		// .fire::before {
		//    backdrop-filter: blur(50px);
		//    content: "";
		//    display: block;
		//    height: 100%;
		//    left: 0;
		//    position: absolute;
		//    top: 0;
		//    width: 100%;
		//    z-index: 0;
		//  }

		.fire {
			position: fixed;
			top: 50%;
			left: 50%;
			// background: rgba(255, 255, 255, .3);
			// background: rgba(220, 220, 220, 0.3);
			// background: rgba(144, 144, 144, 0.3);
			border-radius: 10px;
			// box-shadow: 5px 5px 20px 5px rgba(0, 0, 0, .3);
			// backdrop-filter: blur(5px);
			margin-left: -300rpx;
			margin-top: -350rpx;
			width: 600rpx;
			height: 700rpx;


			.new_img {
				width: 600rpx;
				height: 700rpx;
			}

			.quxiao {
				position: absolute;
				bottom: 40rpx;
				left: 50%;
				transform: translateX(-50%);
			}

			.cut_price {
				position: absolute;
				top: 54%;
				left: 50%;
				transform: translateX(-50%);
				letter-spacing: 0.05em;
				font-size: 46rpx;
				font-weight: bolder;
				white-space: nowrap;
				color: #f9daa3;
				// text-shadow: 0px 0px 0px #fd121d;
				// text-shadow: 5px 5px 1px #fd121d;
				// text-shadow: 6px 6px 3px hsla(14, 100%, 30%, 1);
				// background-image: linear-gradient(to bottom, #ffffff, #fcf7e9, #fae3b9, #f9daa3);
				// background-clip: text;
				// -webkit-background-clip: text;
				// /*将设置的背景颜色限制在文字中*/
				// -webkit-text-fill-color: transparent;
				// /*给文字设置成透明*/
				z-index: 999999;
			}

			.cut_price::before {
				content: attr(text);
				position: absolute;
				z-index: -1;
				text-shadow: 1px 5px 0px #ff0307;
			}

			.img1 {
				position: absolute;
				top: 0;
				left: 0;
			}

			.img2 {
				position: absolute;
				top: 10rpx;
				left: 20rpx;
			}

			.img3 {
				position: absolute;
				top: 0;
				left: 0;
			}

			.img4 {
				position: absolute;
				top: 0;
				left: 0;
			}

			.img5 {
				position: absolute;
				top: 0;
				left: 0;
			}

			.img6 {
				position: absolute;
				top: 0;
				left: 0;
			}
		}

		.cutPriceText {
			.title {
				font-size: 30rpx;
				font-weight: 600;
				margin: 0 auto;
				text-align: center;
			}

			.cut_price {
				text-align: center;
				margin-top: 30rpx;
			}

			.cut_price1 {
				text-align: center;
				margin-top: 10rpx;
			}
		}

		.cut_pro_list {
			box-sizing: border-box;
			padding: 20rpx;
			display: flex;
			background-color: #fff4e6;
			margin-bottom: 25rpx;
			border-radius: 15rpx;
			font-size: 24rpx;

			.imgs {
				width: 180rpx;
				height: 180rpx;
				flex-shrink: 0;
				margin-right: 20rpx;
			}

			.cut_right {
				width: 100%;
				display: flex;
				flex-direction: column;
				justify-content: space-around;

				&_bottom {
					display: flex;
					justify-content: space-between;
					// color: #eb3724;
					color: #8c6c49;

					.cut_price {
						font-weight: 600;
					}

					.cut_title {
						font-size: 24rpx;
						display: flex;
						align-items: center;
						padding: 4rpx 20rpx;
						// background-color: #919191;
						// background-color: #eb3724;
						background-color: #bf9465;
						color: #ffffff;
						border-radius: 30rpx;
						margin-right: 10rpx;
						animation: btnshake1 1.5s linear infinite;

						.img_foot {}
					}

					@keyframes btnshake1 {
						0% {
							transform: scale(1);
							/*开始为原始大小*/
						}

						25% {
							transform: scale(1.15);
						}

						50% {
							transform: scale(1);
						}

						75% {
							transform: scale(1.15);
						}

						100% {
							transform: scale(1);
						}
					}

					.isColor {
						background-color: #eb3724;
					}
				}
			}
		}

	}
</style>